<template>
	<div>
		<el-anchor :container="anchorBox" ref="anchorRef" :offset="20" direction="horizontal" @click="handleClickAnchor">
			<el-anchor-link href="#person_message">
				<div class="text-18px">个人资料</div>
			</el-anchor-link>
			<el-anchor-link href="#security_setting">
				<div class="text-18px">安全设置</div>
			</el-anchor-link>
			<el-anchor-link href="#common_functions">
				<div class="text-18px">常用功能</div>
			</el-anchor-link>
			<el-anchor-link href="#preference_settings">
				<div class="text-18px">偏好设置</div>
			</el-anchor-link>
			<el-anchor-link href="#about_us">
				<div class="text-18px">关于我们</div>
			</el-anchor-link>
		</el-anchor>
		<div ref="anchorBox" id="anchor_box" class="overflow-y-auto h-80vh mt-20px scrollbar_hide">
			<!-- 用户信息 -->
			<div id="person_message" class="mb-20px">
				<SetUser :email="userInfo.email" :id="userInfo.id" :register="userInfo.register" :url="userInfo.url" >
					<template #user="{scope}">
						<UserBlock :email="scope.email" :id="scope.id" :register="scope.register" :url="scope.url" />
					</template>
				</SetUser>
			</div>
			<!-- 安全设置 -->
			<div id="security_setting" class="mb-20px">
				<SetSecurity></SetSecurity>
			</div>
			
			<div id="common_functions" class="mb-20px">
			</div>
			<!-- 偏好设置 -->
			<div id="preference_settings" class="mb-20px">
				<SetPreference></SetPreference>
			</div>
			<div id="about_us" class="mb-20px">
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import SetUser from './components/SetUser.vue';
import SetSecurity from './components/SetSecurity.vue';
import SetPreference from './components/SetPreference.vue';
import UserBlock from '../components/UserBlock.vue';
const anchorBox = ref<any>(null)
const anchorRef = ref<any>(null)
const userInfo = ref({
	email: 'Hi,231****@qq.com',
	id: '000000000',
	register: '000000000',
	url: '/more/avatar.jpeg'
})

function handleClickAnchor(e: any) {
	//阻止点击的默认事件修改路由
	e.preventDefault();
}

onMounted(() => {
	// console.log(anchorBox.value)
	// console.log(anchorRef.value)
	anchorRef.value.scrollTo('#person_message')
})

</script>
<style lang="scss" scoped>
::v-deep .el-anchor__link.is-active {
	color: #000000;
}

::v-deep .el-anchor__marker {
	background-color: #114CEE;
	height: 4px !important;
}

.scrollbar_hide::-webkit-scrollbar {
	display: none;
}
</style>
